<template>
    <div>
        <a-button type="primary" @click="showModal" maskClosable="false">
            <span class="iconfont icon-zengjiatianjiajiahao"></span>
            <span>新增资源</span>
        </a-button>
        <a-modal
          v-model="visible"
          title="新增资源"
          @ok="handleOk"
          :maskClosable="false"
          :footer="null"
          :centered="true"
          class="popupWindow"
        >
            <div class="content">
                <div class="name">
                    <span>资源名称:</span>
                    <a-input placeholder="Basic usage" />
                </div>
                <div class="special">
                    <span>专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题:</span>
                    <a-select
                      label-in-value
                      :default-value="{ key: '前端开发' }"
                      style="width: 120px"
                      @change="handleChange"
                    >
                        <a-select-option value="前端开发"> 前端开发 </a-select-option>
                        <a-select-option value="后端开发"> 后端开发 </a-select-option>
                        <a-select-option value="学习心得"> 学习心得 </a-select-option>
                        <a-select-option value="职业路线"> 职业路线 </a-select-option>
                    </a-select>
                </div>
                <div class="domType">
                    <span>文件类型:</span>
                    <a-select
                      label-in-value
                      :default-value="{ key: '图文' }"
                      style="width: 120px"
                      @change="handleChange"
                    >
                        <a-select-option value="图文"> 图文 </a-select-option>
                        <a-select-option value="视频"> 视频 </a-select-option>
                        <a-select-option value="音频"> 音频 </a-select-option>
                    </a-select>
                </div>
                <div class="upload">
                    <div class="clearfix">
                        <span>资源上传:</span>
                        <a-upload
                          :file-list="fileList"
                          :remove="handleRemove"
                          :before-upload="beforeUpload"
                        >
                            <a-button> <a-icon type="upload" />选择文件 </a-button>
                        </a-upload>
                    </div>
                </div>
                <div class="poster">
                    <span>海&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;报:</span>
                    <div class="clearfix">
                        <a-upload
                          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                          list-type="picture-card"
                          :file-list="fileList"
                          @preview="handlePreview"
                          @change="handleChange"
                        >
                            <div v-if="fileList.length < 8">
                                <a-icon type="plus" />
                                <div class="ant-upload-text">Upload</div>
                            </div>
                        </a-upload>
                        <a-modal
                          :visible="previewVisible"
                          :footer="null"
                          @cancel="handleCancel"
                        >
                            <img alt="example" style="width: 100%" :src="previewImage" />
                        </a-modal>
                    </div>
                </div>
                <div class="describe">
                    <span>资源描述:</span>
                    <a-textarea placeholder="Basic usage" :rows="4" />
                </div>
                <div class="permissions">
                    <span>权&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;限:</span>
                    <a-radio-group default-value="a" button-style="solid">
                        <a-radio-button value="a"> 开放资源</a-radio-button>
                        <a-radio-button value="b"> 内部资源 </a-radio-button>
                    </a-radio-group>
                </div>
                <div class="button">
                    <a-button> 取消 </a-button>
                    <a-button type="primary"> 提交 </a-button>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
import reqwest from "reqwest";
function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
    });
}
export default {
    components: {},
    data() {
        return {
            visible: false,
            fileList: [],
            uploading: false,
            previewVisible: false,
            previewImage: "",
            fileList: [
                {
                    uid: "-1",
                    name: "image.png",
                    status: "done",
                    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                },
            ],
        };
    },
    methods: {
        showModal() {
            this.visible = true;
        },
        handleOk(e) {
            console.log(e);
            this.visible = false;
        },
        handleRemove(file) {
            const index = this.fileList.indexOf(file);
            const newFileList = this.fileList.slice();
            newFileList.splice(index, 1);
            this.fileList = newFileList;
        },
        beforeUpload(file) {
            this.fileList = [...this.fileList, file];
            return false;
        },
        handleUpload() {
            const { fileList } = this;
            const formData = new FormData();
            fileList.forEach((file) => {
              formData.append("files[]", file);
            });
            this.uploading = true;

            // You can use any AJAX library you like
            reqwest({
                url: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
                method: "post",
                processData: false,
                data: formData,
                success: () => {
                    this.fileList = [];
                    this.uploading = false;
                    this.$message.success("upload successfully.");
                },
                error: () => {
                    this.uploading = false;
                    this.$message.error("upload failed.");
                },
            });
        },
        handleCancel() {
            this.previewVisible = false;
        },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
        },
        handleChange({ fileList }) {
            this.fileList = fileList;
        },
    },
};
</script>
<style lang='scss' scoped>
/deep/ .ant-modal-content {
  width: 700px;
  height: 700px;
}
// /deep/ .ant-modal-content {
//     top: -100px;
// }
.content {
  span {
    margin-right: 10px;
  }
  .name {
    margin-bottom: 10px;
    .ant-input {
      width: 200px;
    }
  }
  .special {
    margin-bottom: 10px;
    .ant-select {
      width: 200px !important;
    }
  }
  .domType {
    margin-bottom: 10px;
    .ant-select {
      width: 200px !important;
    }
  }
  .upload {
    margin-bottom: 10px;
  }
  .poster {
    margin-bottom: 10px;
  }
  .describe {
    margin-bottom: 10px;
  }
  .permissions {
    margin-bottom: 10px;
  }
  .button {
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px;
    padding: 0 200px;
    //   border: 1px solid red;
  }
}
</style>
